<template>
  <div>
    <button @click="flag = !flag">切换</button>

    <hr style="margin: 20px 0" />

    <!-- 默认使用方式 -->
    <!-- <transition name="fade">
      <div v-if="flag" class="box"></div>
    </transition> -->

    <!--
      自定义过渡类名 + 第三方动画

      约束动画时长：
      :duration="{
        enter: 1000,
        leave: 5000,
      }"
    -->
    <transition
      @before-enter="enterFrom"
      @enter="enterActive"
      @after-enter="enterTo"
      @enter-cancelled="enterCancel"
      @before-leave="leaveFrom"
      @leave="leaveActive"
      @after-leave="leaveTo"
      @leave-cancelled="leaveCancel"
      appear
      appear-active-class="animate__animated animate__shakeX"
      enter-active-class="animate__animated animate__flipInX"
      leave-active-class="animate__animated animate__flipOutX"
    >
      <div v-if="flag" class="box"></div>
    </transition>

    <hr style="margin: 20px 0" />

    <button @click="nums.push(nums.length + 1)">add</button>
    <button @click="nums.pop()">remove</button>

    <br />

    <!-- 过渡列表 -->
    <transition-group
      appear
      appear-active-class="animate__animated animate__lightSpeedInRight"
      enter-active-class="animate__animated animate__rollIn"
      leave-active-class="animate__animated animate__hinge"
    >
      <h2
        style="display: inline-block; width: 50px; height: 50px; margin: 10px"
        v-for="n in nums"
        :key="n"
        class="box"
      >
        {{ n }}
      </h2>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import "animate.css";
// import gsap from "gsap";

const flag = ref(true);

const nums = ref([1, 2, 3]);

const enterFrom = (_el: Element) => {
  console.log("进入前");
};

const enterActive = (_el: Element, done: Function) => {
  console.log("过渡曲线");

  setTimeout(() => {
    done(); // 3s 后完成，执行在自动执行 enterTo 方法
  }, 3000);
};

const enterTo = (_el: Element) => {
  console.log("进入结束");
};

const enterCancel = (_el: Element) => {
  console.log("进入过渡效果被打断");
};

const leaveFrom = (_el: Element) => {
  console.log("离开前");
};

const leaveActive = (_el: Element, _done: Function) => {
  console.log("过渡曲线");
};

const leaveTo = (_el: Element) => {
  console.log("离开结束");
};

const leaveCancel = (_el: Element) => {
  console.log("离开过渡效果被打断");
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 【组件动画】 */

/* 进入前 */
.fade-enter-from {
  opacity: 0;
  width: 0;
  height: 0;
  transform: rotate(360deg);
}

/* 过渡曲线 */
.fade-enter-active {
  transition: all 1s ease;
}

/* 进入结束（一般不写，或写了和原样式保持一致） */
/* .fade-enter-to {
  opacity: 1;
  width: 200px;
  height: 200px;
} */

/* ******************************************* */

/* 离开前 */
.fade-leave-from {
  opacity: 1;
  width: 200px;
  height: 200px;
  transform: rotate(-360deg);
}

/* 过渡曲线 */
.fade-leave-active {
  transition: all 1s ease;
}

/* 离开结束 */
.fade-leave-to {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>
